<script setup lang="ts">
	import { onMounted, ref, computed } from 'vue'
	import HttpService from '../../api/index';  //请求数据接口 
	import { useUserStore } from '../../store/index';  //pinia状态管理库

	const httpService = new HttpService('https://example.com/api')
	let UserStore = useUserStore()
	const title = ref<string>("标题")
	const navbarBgcolor = ref('')
	const isShow = ref<boolean[]>([false,false])
	onMounted(() => {
		setTimeout(() => {
		}, 350)
	})
	
	const to=(url)=>{
		uni.navigateTo({
			url: url
		});
	}
	const change = (e : any, t : string) => {
		console.log(e, t,isShow.value[0])
		switch (t) {
			case 'center':
				isShow.value[0] = e == 'open' ? true : false;
				break;
			case 'bottom':
				isShow.value[1] = e == 'open' ? true : false;
				break;
			default:
				break;
		}
			console.log(isShow.value,isShow.value[0])
	}
</script>
<template>
	<view class="content">
		<!-- 自定义头部组件 -->
		<use-navbar ref="navbar" type="custom" :show="true" :back="true" :bg-color="navbarBgcolor" :title="''">
			<template v-slot:title>
				<view class="tac">
					<text class="fs-34 fwbd">事项明细</text>
				</view>
			</template>
			<template v-slot:right>
				<view class="tac trophy" @click='toTrophy'>
					<use-icons class="icon-03" size="25" color="#ccc"></use-icons>
				</view>
			</template>
		</use-navbar>
		<image class="logo" src="/static/logo.png" @click="to"></image>
		<view class="text-area" @click="to">
			<text class="title">{{title}}</text>
		</view>

		<view class="text-area" @click="to('/pages/test/compress')">
			<text class="title">图片压缩</text>
		</view>
		<view class="btn blue  margin-left  padding-sm border-radius margin-sm" @click="change('open','center')">
			<text class="ft-white fs-23">中部弹窗</text>
		</view>
		<view class="btn blue  margin-left  padding-sm border-radius margin-sm" @click="change('open','bottom')">
			<text class="ft-white fs-23">底部弹窗</text>
		</view>
		<!-- 自定义弹窗 中部-->

		<use-popup mode="center" bgclass=" " v-model="isShow[0]" :close-icon="true" :show="isShow[0]" @open="change('open','center')"
			@close="change('close','center')">
			<view class="border-radius-top30 bg-popup safe-area-inset-bottom ">
				<view class="tac w-full padding-sm">
					<text class="fwbd fs-32">标题</text>
				</view>
				<view class="padding-lr margin-bottom-xl pos-r" style="min-height: 25vh;">
					<view class="type-grid">
						<!-- 内容区域 -->
					</view>
				</view>
			</view>
		</use-popup>
		<!-- 自定义弹窗 底部-->
		
		<use-popup mode="bottom" bgclass=" " v-model="isShow[1]"  :show="isShow[1]" @open="change('open','bottom')"
			@close="change('close','bottom')">
			<view class="border-radius-top30 bg-popup safe-area-inset-bottom ">
				<view class="tac w-full padding-sm">
					<text class="fwbd fs-32">标题</text>
				</view>
				<view class="padding-lr margin-bottom-xl pos-r" style="min-height: 25vh;">
					<view class="type-grid">
						<!-- 内容区域 -->
					</view>
				</view>
			</view>
		</use-popup>
		<!-- 自定义底部导航栏 -->
		<use-tabbar tabbarIndex=0></use-tabbar>
	</view>
</template>


<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>